<script setup>
import { onMounted, ref, watch } from 'vue'
import axios from 'axios'
import Segement from '@/components/course/Segement.vue'
import CourseList from '@/components/course/CourseList.vue';


var categoryTree = ref([]); // 分类树
var selectedCategory = ref({}); // 二级分类
var categoryIds = ref([]);// 三级分类
var currentIndex = ref(0); // 当前选中的三级分类索引
var courseList = ref([]); // 三级分类下的课程列表
var data = ref({}); // 缓存数据

// ---
var showCategory = ref(false);

function currentIndexChange(index) {

    console.log(index);
    currentIndex.value = index;
    console.log("当前二级分类是" + selectedCategory.value.name + " id = " + selectedCategory.value.id + "当前三级分类是" + categoryIds.value[index].name + " id = " + categoryIds.value[index].id);
    fetchCourse(categoryIds.value[index].id);
    const scrollview = document.getElementsByClassName('sub-list-container')[0];
    scrollview.scrollLeft = index * scrollview.offsetWidth;
}

function selectedCategoryAction(item) {
    console.log(item);
    selectedCategory.value = item;
    categoryIds.value = item.children;
    currentIndex.value = 0;
    fetchCourse(categoryIds.value[0].id);
    showCategory.value = false;
}

watch(showCategory, (newVal, oldVal) => {
    console.log(newVal ? "显示分类" : "隐藏分类");
})


// https://api.btclass.cn/v2-mojave/alive

function fetCategoryIds() {
    let url = "https://api.btclass.net/v2-course/v2/category-tree?code=course";
    axios.get(url).then(res => {
        if (res.data.code === 200) {
            categoryTree.value = res.data.res;
            selectedCategory.value = categoryTree.value[0].children[0];
            categoryIds.value = selectedCategory.value.children;
            fetchCourse(categoryIds.value[0].id);
            console.log(categoryIds.value);
        } else {
            console.log(res);
        }
    }).catch(err => {
        console.log(err);
    })
}

async function fetchCourse(categoryId, page) {

    var page = 0 || page;
    let url = `https://api.btclass.net/v2-course/v2/course/for-user?categoryId=${categoryId}&status=published&page=${page}&limit=10&needCount=0&showable=1&pid=0&needPriceDetail=1&ns=bt`
    console.log(data.value[categoryId]); // undefined
    if (data.value[categoryId]) {
        console.log("缓存数据");
        return data.value[categoryId];
    }
    console.log("fetchCourse ing ······" + categoryId);
    try {
        var res = await axios.get(url)
        if (res.data.code === 200) {
            courseList.value = res.data.res.rows;
            if (courseList.value.length < 1) {
                console.log('暂无课程');
                // data.value.remove(categoryId);
            } else {
                data.value[categoryId] = res.data.res.rows
                console.log(courseList.value);
            }
        } else {
            console.log(res);
        }//
    } catch (error) {
        console.log(error);
    }
}

function scrollHandler(e) {
    var atSnappingPoint = e.target.scrollLeft % e.target.offsetWidth === 0;
    var timeOut = atSnappingPoint ? 0 : 150; //see notes

    clearTimeout(e.target.scrollTimeout); //clear previous timeout

    e.target.scrollTimeout = setTimeout(function () {
        console.log('Scrolling stopped!' + e.target.scrollLeft);
        const page = e.target.scrollLeft / e.target.offsetWidth;
        console.log(page);
        currentIndexChange(page);
    }, timeOut);
}


onMounted(() => {
    console.log("onMounted");
    fetCategoryIds();
    document.getElementsByClassName('sub-list-container')[0].addEventListener('scroll', scrollHandler);
});
</script>

<template>
    <header>
        <button class="big-category" type="button" @click="showCategory = true">{{ selectedCategory.name }}</button>
        <Segement :categoryIds="categoryIds" :currentIndex="currentIndex" @currentIndexChange="currentIndexChange" />
    </header>
    <div class="sub-list-container">
        <!-- <div v-for="(item,index) in categoryIds" :key="index"> {{ data[item.id] }}  &nbsp;</div> -->
        <!-- <div v-for="(item,index) in data" :key="index"> {{ item.course  }}  &nbsp;  </div> -->
        <CourseList :courseList="data[item.id] || []" v-for="(item, index) in categoryIds" :key="index" />
    </div>

    <div class="category-container" v-show="showCategory">
        <div class="mask-layer" v-show="showCategory" @click="showCategory = false"></div>
        <div class="category-content">
            <div class="first-category-container" v-for="(item, index) in categoryTree" :key="index">
                <div class="category-title">
                    {{ item.name }}
                </div>
                <div class="second-category-container">
                    <div class="second-category-item"
                        :class="item.id == selectedCategory.id ? 'second-category-item-seleted' : ''"
                        @click="selectedCategoryAction(item)" v-for="(item, index) in item.children" :key="index">
                        {{ item.name }}
                    </div>
                </div>
            </div>
        </div>
        <!-- </Transition> -->
    </div>
</template>

<style scoped>
header {
    padding: 20px 0 0 0;
    background-color: #fff;
    width: 100%;
    height: 90px;
}

.big-category {
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: #363636;
    border: none;
    background-color: transparent;
    width: 100%;
}

/* -------- */
.sub-list-container {
    background-color: #fff;
    display: flex;
    padding-top: 20px;
    scroll-behavior: smooth;
    /* overflow-x: scroll; */
    align-items: flex-start;
    height: calc(100% - 90px);
    overflow: auto;
    scroll-snap-type: x mandatory;
}

.list {
    width: 100vw;
    height: 100%;
    scroll-snap-align: start;
    /* background-color: red; */
}

.category-container {
    /* background-color: rgba(0, 0, 0, 0.346); */
    background-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

}

.mask-layer {
    /* background-color: rgba(0, 0, 0, 0.2); */
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    animation: mask-layer-keyframes 0.3s ease-in-out;
    animation-fill-mode: forwards;

}

/* 
.fade-enter-active .mask-layer{
    animation: mask-layer-keyframes 0.3s ;
}

.fade-leave-active .mask-layer{
    animation: mask-layer-keyframes 0.3s reverse;
} */

@keyframes mask-layer-keyframes {
    0% {
        background-color: rgba(255, 0, 0, 0);
    }

    100% {
        background-color: rgba(0, 0, 0, 0.281);
    }
}

.category-content {
    border-radius: 0 0 20px 20px;
    background-color: white;
    padding: 20px;
    position: relative;
    z-index: 2;
    top: -100%;
    animation: move 0.3s ease-in-out;
    animation-fill-mode: forwards;
}


@keyframes move {
    0% {
        top: -200%;
    }

    100% {
        top: -100%;
    }
}


/* .first-category-container {
    margin-top: 2px;
} */

.first-category-container .category-title {
    font-size: 18px;
    font-weight: 700;
    color: #363636;
    line-height: 34px;
}

.second-category-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
}

.second-category-item {
    margin: 0 10px 10px 0;
    line-height: 14px;
    padding: 9.5px 0;
    border-radius: 4px;
    font-size: 14px;
    color: #5a5a5a;
    background-color: #efefef;
    width: calc(33.33% - 14px);
    text-align: center;
}

.second-category-item-seleted {
    color: white;
    background-color: #86b7ff;
}
</style>
